<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>居中显示</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <style>
      body,
      p,
      ol,
      ul,
      li,
      dl,
      dd,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      input,
      iframe,
      nav,
      header,
      footer {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      body {
        font-size: 14px;
        font-family: -apple-system, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
        color: #27282b;
        background: #fff;
      }
      a {
        text-decoration: none;
        color: #27282b;
      }
      *,
      *::before,
      *::after {
        outline: none;
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }

      /* 1）未知高度 + margin */
      /* .wrap {
        position: relative;
        height: 100%;
      } */
      
      .wrap .box {
        position: absolute;
        top: 50%;
        left: 50%;
        background: yellow;
        color: red;
        transform: translate(-50%, -50%);
      }

      /* 2)已知高度 + margin */
      /* .wrap .box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background: rgb(108, 108, 139);
        color: white;
        margin: -50px 0 0 -50px;
        text-align: center;
        line-height: 100px;
      } */

      /* 3) flex */
      /* .wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      } */

      /* 4) table */
      /* .wrap {
        display: table;
        width: 100%;
        height: 100%;
        vertical-align: middle;
        text-align: center;
      }
      .wrap .box {
        display: table-cell;
        width: 100px;
        height: 100px;
        background: yellowgreen;
      } */
    </style>
  </head>

  <body>
    <div class="wrap">
      <div class="box">place center</div>
    </div>

    <script src="https://lib.baomitu.com/vue/2.5.21/vue.min.js"></script>
    <script>
      function spacy(str) {
        return str.split('').join(' ')
      }

      String.prototype.spacy = function() {
        return this.split('').join(' ')
      }

      // 自定义log 1
      function log() {
        console.log.apply(console, arguments)
      }

      // 自定义log 2
      function log() {
        var args = Array.prototype.slice.call(arguments)
        args.unshift('(app)')
        console.log.apply(console, args)
      }
      // 自定义log 3 es6
      function log(...args) {
        args.unshift('(app)')
        console.log.apply(console, args)
      }

      // bind
      Function.prototype.bind =
        Function.prototype.bind ||
        function(content) {
          var self = this
          return function() {
            return self.apply(content, arguments)
          }
        }
    </script>
  </body>
</html>
